"use client"

import { useState } from "react"
import {
  Bar,
  BarChart,
  CartesianGrid,
  Legend,
  Line,
  LineChart,
  PieChart,
  Pie,
  Cell,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
  Area,
  AreaChart,
  Radar,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
} from "recharts"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { CalendarIcon } from "lucide-react"
import { format } from "date-fns"
import { cn } from "@/lib/utils"

// 修改模拟数据 - 月度注意力趋势
const monthlyAttentionData = [
  { month: "1月", 平均注意力: 78, 最高注意力: 92 },
  { month: "2月", 平均注意力: 82, 最高注意力: 95 },
  { month: "3月", 平均注意力: 80, 最高注意力: 93 },
  { month: "4月", 平均注意力: 85, 最高注意力: 97 },
  { month: "5月", 平均注意力: 75, 最高注意力: 90 },
  { month: "6月", 平均注意力: 70, 最高注意力: 88 },
  { month: "7月", 平均注意力: 68, 最高注意力: 85 },
  { month: "8月", 平均注意力: 72, 最高注意力: 89 },
  { month: "9月", 平均注意力: 76, 最高注意力: 91 },
  { month: "10月", 平均注意力: 82, 最高注意力: 94 },
  { month: "11月", 平均注意力: 84, 最高注意力: 96 },
  { month: "12月", 平均注意力: 80, 最高注意力: 93 },
]

// 修改模拟数据 - 学科表现对比
const subjectPerformanceData = [
  { subject: "高等数学", 平均分: 85, 最高分: 98, 最低分: 65 },
  { subject: "大学英语", 平均分: 78, 最高分: 95, 最低分: 60 },
  { subject: "程序设计", 平均分: 82, 最高分: 97, 最低分: 62 },
  { subject: "数据结构", 平均分: 88, 最高分: 99, 最低分: 70 },
  { subject: "计算机网络", 平均分: 76, 最高分: 92, 最低分: 58 },
]

// 修改模拟数据 - 班级出勤率
const attendanceData = [
  { name: "计算机科学1班", value: 95, color: "#4ade80" },
  { name: "计算机科学2班", value: 92, color: "#60a5fa" },
  { name: "软件工程1班", value: 88, color: "#f97316" },
  { name: "软件工程2班", value: 90, color: "#8b5cf6" },
  { name: "电子工程1班", value: 85, color: "#ec4899" },
  { name: "电子工程2班", value: 93, color: "#14b8a6" },
]

// 模拟数据 - 学生能力雷达图
const studentAbilityData = [
  { subject: "语言表达", A: 80, B: 90, fullMark: 100 },
  { subject: "逻辑思维", A: 85, B: 75, fullMark: 100 },
  { subject: "创造力", A: 65, B: 85, fullMark: 100 },
  { subject: "团队协作", A: 90, B: 70, fullMark: 100 },
  { subject: "自主学习", A: 70, B: 80, fullMark: 100 },
  { subject: "问题解决", A: 75, B: 85, fullMark: 100 },
]

// 模拟数据 - 每日注意力分布
const dailyAttentionData = [
  { time: "08:00", 注意力: 85 },
  { time: "09:00", 注意力: 90 },
  { time: "10:00", 注意力: 75 },
  { time: "11:00", 注意力: 70 },
  { time: "12:00", 注意力: 65 },
  { time: "13:00", 注意力: 60 },
  { time: "14:00", 注意力: 75 },
  { time: "15:00", 注意力: 80 },
  { time: "16:00", 注意力: 85 },
]

export function AnalyticsDashboard() {
  const [date, setDate] = useState<Date | undefined>(new Date())

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
            <div>
              <CardTitle>数据分析仪表盘</CardTitle>
              <CardDescription>全面分析学生学习表现和课堂数据</CardDescription>
            </div>
            <div className="flex gap-2">
              <Select defaultValue="all">
                <SelectTrigger className="w-[180px]">
                  <SelectValue placeholder="选择班级" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">所有班级</SelectItem>
                  <SelectItem value="cs">计算机科学</SelectItem>
                  <SelectItem value="se">软件工程</SelectItem>
                  <SelectItem value="ee">电子工程</SelectItem>
                  <SelectItem value="ai">人工智能</SelectItem>
                </SelectContent>
              </Select>
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    variant={"outline"}
                    className={cn("w-[240px] justify-start text-left font-normal", !date && "text-muted-foreground")}
                  >
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {date ? format(date, "PPP") : <span>选择日期</span>}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0" align="start">
                  <Calendar mode="single" selected={date} onSelect={setDate} initialFocus />
                </PopoverContent>
              </Popover>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="overview">
            <TabsList className="mb-4">
              <TabsTrigger value="overview">总览</TabsTrigger>
              <TabsTrigger value="attention">注意力分析</TabsTrigger>
              <TabsTrigger value="performance">学习表现</TabsTrigger>
              <TabsTrigger value="attendance">出勤分析</TabsTrigger>
            </TabsList>

            <TabsContent value="overview" className="space-y-6">
              <div className="grid gap-6 md:grid-cols-2">
                <Card>
                  <CardHeader>
                    <CardTitle>月度注意力趋势</CardTitle>
                    <CardDescription>全年各月份平均注意力和最高注意力</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <ResponsiveContainer width="100%" height={300}>
                      <LineChart data={monthlyAttentionData}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="month" />
                        <YAxis />
                        <Tooltip />
                        <Legend />
                        <Line type="monotone" dataKey="平均注意力" stroke="#8884d8" activeDot={{ r: 8 }} />
                        <Line type="monotone" dataKey="最高注意力" stroke="#82ca9d" />
                      </LineChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader>
                    <CardTitle>学科表现对比</CardTitle>
                    <CardDescription>各学科平均分、最高分和最低分</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <ResponsiveContainer width="100%" height={300}>
                      <BarChart data={subjectPerformanceData}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="subject" />
                        <YAxis />
                        <Tooltip />
                        <Legend />
                        <Bar dataKey="平均分" fill="#8884d8" />
                        <Bar dataKey="最高分" fill="#82ca9d" />
                        <Bar dataKey="最低分" fill="#ffc658" />
                      </BarChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>
              </div>

              <div className="grid gap-6 md:grid-cols-2">
                <Card>
                  <CardHeader>
                    <CardTitle>班级出勤率</CardTitle>
                    <CardDescription>各班级学生出勤率对比</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <ResponsiveContainer width="100%" height={300}>
                      <PieChart>
                        <Pie
                          data={attendanceData}
                          cx="50%"
                          cy="50%"
                          labelLine={false}
                          outerRadius={80}
                          fill="#8884d8"
                          dataKey="value"
                          label={({ name, value }) => `${name}: ${value}%`}
                        >
                          {attendanceData.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={entry.color} />
                          ))}
                        </Pie>
                        <Tooltip />
                      </PieChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader>
                    <CardTitle>学生能力分析</CardTitle>
                    <CardDescription>不同班级学生能力对比</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <ResponsiveContainer width="100%" height={300}>
                      <RadarChart outerRadius={90} data={studentAbilityData}>
                        <PolarGrid />
                        <PolarAngleAxis dataKey="subject" />
                        <PolarRadiusAxis angle={30} domain={[0, 100]} />
                        <Radar name="一班" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
                        <Radar name="二班" dataKey="B" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.6} />
                        <Legend />
                        <Tooltip />
                      </RadarChart>
                    </ResponsiveContainer>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

            <TabsContent value="attention" className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>每日注意力变化</CardTitle>
                  <CardDescription>一天中不同时段的注意力变化趋势</CardDescription>
                </CardHeader>
                <CardContent>
                  <ResponsiveContainer width="100%" height={400}>
                    <AreaChart data={dailyAttentionData}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="time" />
                      <YAxis />
                      <Tooltip />
                      <Area type="monotone" dataKey="注意力" stroke="#8884d8" fill="#8884d8" fillOpacity={0.3} />
                    </AreaChart>
                  </ResponsiveContainer>
                </CardContent>
              </Card>

              {/* 可以添加更多注意力相关的图表 */}
            </TabsContent>

            <TabsContent value="performance" className="space-y-6">
              {/* 学习表现相关图表 */}
            </TabsContent>

            <TabsContent value="attendance" className="space-y-6">
              {/* 出勤分析相关图表 */}
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
